<template>
  <view>
    <!-- 导航栏 -->
    <up-navbar
      title="活动大厅"
      leftIcon=""
      :placeholder="true"
      bgColor="transparent"
      leftIconColor="#fff"
      titleStyle="color: #fff;font-weight: bold;font-size: 34rpx">
    </up-navbar>
    <!-- 轮播图 -->
    <view class="w-full h-[408rpx] relative">
      <up-swiper
        :list="$url(banner)"
        keyName="url"
        height="408rpx"
        :loading="isLoading"></up-swiper>
      <view class="gradient absolute top-0 left-0 w-full h-[408rpx]"></view>
    </view>
    <!-- 活动列表 -->
    <view
      class="font-heiti text-center flex justify-between items-center px-[48rpx] py-[40rpx] gap-[88rpx] text-white text-[40rpx]">
      <view
        v-for="(item, index) in events"
        :key="index"
        @click="item.fn && item.fn()">
        <view class="w-[160rpx] h-[160rpx]">
          <up-image
            :src="item.icon"
            width="100%"
            height="100%"
            :webp="false"
            bgColor="transparent"></up-image>
        </view>
        <view class="mt-[20rpx]">{{ item.name }}</view>
      </view>
    </view>
    <!-- 背景 -->
    <BackgroundImage />
    <!-- 底部导航栏 -->
    <CustomTabbar :currentIndex="1" />
  </view>
</template>

<script setup>
import { getBanner } from "@/api/event";
import point from "@/static/images/events/point.png";
import rank from "@/static/images/events/rank.png";
import SignIn from "@/static/images/events/SignIn.png";
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
onShow(() => {
  getBannerList();
});
const { banner, isLoading, getBannerList } = useSwiper();
const { events } = useEvents();
/**
 * @description 轮播图
 * @returns {Array} 轮播图
 * @returns {Boolean} 轮播图是否加载中
 */
function useSwiper() {
  const banner = ref([]);
  const isLoading = ref(false); // 轮播图是否加载中
  const getBannerList = async () => {
    isLoading.value = true;
    try {
      const res = await getBanner();
      banner.value = res.data.map((item) => {
        return {
          ...item,
          url: item.pic,
        };
      });
      isLoading.value = false;
    } catch (error) {}
  };
  return {
    banner,
    isLoading,
    getBannerList,
  };
}
/**
 * @description 活动
 * @returns {Array} 活动
 */
function useEvents() {
  const events = reactive([
    {
      name: "每日签到",
      icon: SignIn,
      fn: () => {
        // 跳转到签到
        uni.navigateTo({
          url: "/goods_packages/signIn/signIn",
        });
      },
    },
    {
      name: "排行榜",
      icon: rank,
      fn: () => {
        // 跳转到排行榜
        uni.navigateTo({
          url: "/goods_packages/rank/rank",
        });
      },
    },
    {
      name: "积分赏",
      icon: point,
      fn: () => {
        // 跳转到积分赏
        uni.navigateTo({
          url: "/goods_packages/pointsRewards/pointsRewards",
        });
      },
    },
  ]);
  return {
    events,
  };
}
</script>

<style lang="scss" scoped>
// 渐变
.gradient {
  background: linear-gradient(
      to bottom,
      #190808 0%,
      transparent 64rpx,
      transparent 100%
    ),
    linear-gradient(to right, #190808 0%, transparent 64rpx, transparent 100%),
    linear-gradient(to left, #190808 0%, transparent 64rpx, transparent 100%),
    linear-gradient(to top, #190808 0%, transparent 64rpx, transparent 100%);
}
</style>
